<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{$promotion['h5_title']}</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
<style>
     html {
          font-size: 50px;
          font-size: 13.33vw;
          -webkit-text-size-adjust: 100%;
     }
     * {
          box-sizing: border-box;
          -webkit-box-sizing: border-box;
     }
     body, p, h1, h2, h3, h4, h5, h6, ul, li {
          margin: 0;
          padding: 0;
     }
     body {
          max-width: 640px;
          margin: 0 auto !important;
          font-size: 14px;
          line-height: 1.15;
          font-family: 'Avenir', Helvetica, Arial, sans-serif;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
          background: #e84c36 url('/fission/img/bg.png') no-repeat center;
          background-size: 100% auto;
     }

     @media (max-width: 320px) {
          html {
               font-size: 42px;
          }
     }
     @media (min-width: 640px) {
          html {
               font-size: 85px;
          }
     }

     .flex-row {
          display: -webkit-flex;
          display: flex;
     }
     .justify-content-sb {
          -webkit-justify-content: space-between;
          justify-content: space-between;
     }
     .align-items-center {
          -webkit-box-align: center;
          -webkit-align-items: center;
          align-items: center;
     }

     .poster-top {
          margin: .24rem .16rem;
          padding: .34rem .44rem;
          background-color: #fefce5;
          border-radius: .32rem;
     }
     .poster-top-header {
          line-height: .5rem;
          margin-bottom: .2rem;
     }
     .poster-top-header img {
          width: .34rem;
          height: .34rem;
          vertical-align: middle;
     }
     .poster-top-title {
          vertical-align: middle;
          font-size: .32rem;
          font-weight: 600;
          color: #8a4526;
          position: relative;
     }
     .poster-top-title::after {
          content: '';
          width: 90%;
          height: .16rem;
          background-color: #f4ecd6;
          position: absolute;
          bottom: 0;
          left: 0;
     }
     .poster-top-title span {
          position: relative;
          z-index: 1;
     }
     .copywriting-btn {
          background: transparent;
          border: 0;
          font-size: .28rem;
          color: #d56428;
     }
     .copywriting-text {
          font-size: .28rem;
          color: #8a4526;
     }
     .poster-tips {
          color: #fff;
          font-size: .28rem;
          line-height: 1.5;
          text-align: center;
          margin: .28rem auto;
     }
     .poster-tips p {
          display: inline-block;
          position: relative;
     }
     .poster-tips p:last-child::after {
          width: 104%;
          left: -2%;
     }
     .poster-wrap { 
          background:url('{$promotion["h5_tow_bg"]?$promotion["h5_tow_bg"]:"https://qvmh-1251270280.cos.ap-guangzhou.myqcloud.com/dc27d48ec68b26090d901119faea8bc9.jpg"}') no-repeat;
          background-size: cover;
          width: 6.34rem;
          height: 10.92rem; 
          padding: .24rem;
          margin: .28rem auto 1.94rem;
          box-sizing: border-box;
          -webkit-box-sizing: border-box;
          border-radius: .32rem;
          border: 2px solid #fff;
          background-color: #fae2b6;
          box-shadow: 0 0 10px #e1c58e inset;
          overflow: hidden;
     }
     .poster-box {
          width: 100%;
          border-radius: .32rem;
          overflow: hidden;
     }
     .poster-box img {
          width: 100%;
     }
     .poster-bottom {
          text-align: center;
          width: 100%;
          height: 1.7rem;
          position: fixed;
          bottom: 0;
          left: 0;
          background-color: #e84c36;
          box-shadow: 0 -3px 5px rgba(0, 0, 0, .1);
     }
     .poster-bottom .bottom-btns {
          width: 50%;
          text-decoration: none;
          color: #ed723c;
          font-size: .32rem;
          font-weight: 600;
          display: block;
          height: .8rem;
          line-height: .8rem;
          margin: .2rem .36rem;
          background: #f9edd3;
          border: 2px solid #ffcbc1;
          border-radius: .4rem;
     }
     .poster-bottom .bottom-btn {
          text-decoration: none;
          color: #ed723c;
          font-size: .32rem;
          font-weight: 600;
          display: block;
          height: .8rem;
          line-height: .8rem;
          margin: .2rem .36rem;
          background: #f9edd3;
          border: 2px solid #ffcbc1;
          border-radius: .4rem;
     }
     .poster-bottom p {
          line-height: .4rem;
          color: #fe8378;
          font-size: .24rem;
     }
     .poster-bottom p img {
          height: .3rem;
          vertical-align: middle;
     }
     .poster-bottom p span {
          vertical-align: middle;
     }
</style>
</head>
<body>
     <div id="app">
          <section class="poster-top">
               <div class="flex-row justify-content-sb align-items-center poster-top-header">
                    <div>
                         <span class="poster-top-title"><span>推荐转发文案：</span></span>
                    </div>
                    {if $promotion['promotion_welcome']}
                         <button onclick="copyToClip('{$promotion["promotion_welcome"]}')" class="copywriting-btn">复制</button>
                    {/if}
               </div>
               <p class="copywriting-text">{$promotion['promotion_welcome']}</p>
          </section>
          <div class="poster-tips" style="text-align:center;">
                {if $promotion['h5_one_guidance']}
                    <p style="width:300px;word-break : break-all;"><span>{$promotion['h5_one_guidance']}</span></p>
                {else}
                    <p style="display: block;"><span>长按保存专属海报分享给好友</span></p>
                    <p style="display: block;"><span>好友扫码添加企业微信后即助力成功</span></p>
                {/if}
          </div>

          <section class="poster-wrap poster-wrap-h">
                {if $promotion['type'] == 2 && $unionid}
                    <img style="width: 6rem;height: 10.92rem; " src="{$qrcode}">
                {else}
                    <img style="margin-top:{$promotion['h5_tow_style']['tops']};margin-left: {$promotion['h5_tow_style']['lefts']};width: 100px" src="{$qrcode}">
                {/if}
          </section>
          <section class="poster-bottom">
               <a class="bottom-btn" onclick="copyToClip('{$urls}')">复制链接</a>
          </section>
     </div>
     <div id="toastBox" class="">
         <span id="toastText">复制成功</span>
     </div>
</body>
</html>
<script type="text/javascript" src="/static/wework/h5/js/clipboard.min.js"></script>
<script>
     function copyToClip(content, message) {
          var aux = document.createElement("input"); 
          aux.setAttribute("value", content); 
          document.body.appendChild(aux); 
          aux.select();
          document.execCommand("copy"); 
          document.body.removeChild(aux);
          if (message == null) {
               tusi("复制成功");
          } else{
               tusi(message);
          }
     }
     
     </script>
<script>
     window.onload=function(){
          if("{$user_index}"){
               window.history.replaceState('', '', "user_index-{\Request::get(1)}-{$userid}.html");
          }else{
               window.history.replaceState('', '', "index-{\Request::get(1)}.html");
          }
     }
</script>